<template>
  <div class="comment-info" v-if="commentInfo && commentInfo.length">
    <div
      class="comment-content"
      v-for="(item, index) in commentInfo"
      :key="index"
    >
      <div class="comment-item">
        <div class="item-time">
          {{ item.createDate || "2022-02-02 12:12:12" }}
        </div>
        <div class="item-content">
          <div class="item-nick">
            {{ item.replierName || $t("given_name") }}：
          </div>
          <div class="item-content-text" style="flex: 1">
            <!-- {{ item.content }} -->
          <span v-html="item.content"></span>
            <el-link
              class="reply-btn"
              type="primary"
              @click="handleReply(item)"
              v-if="detailData.status != 2"
              >{{ $t("reply") }}</el-link
            >
          </div>
        </div>
        <template v-if="item.replyFile">
          <div
            v-for="(url, i) of item.replyFile.split(',')"
            :key="i"
            @click="downloadByUrl(url)"
          >
            <el-link :underline="false">{{
              url.split("/")[url.split("/").length - 1]
            }}</el-link>
          </div>
        </template>
      </div>
      <div v-if="item.childern && item.childern.length">
        <chat
          :commentInfo="item.childern"
          :detailData="detailData"
          @handleReply="handleReply"
        ></chat>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "chat",
  props: {
    commentInfo: {
      type: Array,
      default: () => [],
    },
    detailData: {
      type: Object,
      default: () => ({}),
    },
  },
  data() {
    return {
      baseUrl: process.env.VUE_APP_BASE_API,
    };
  },
  methods: {
    downloadByUrl(url) {
      window.open(this.baseUrl + url);
    },
    handleReply(item) {
      this.$emit("handleReply", item);
    },
  },
};
</script>
<style lang="scss" scoped>
.trend-detail {
  height: 60vh;
  overflow: hidden;
  overflow-y: auto;

  .trend-block {
    padding-bottom: 20px;
    border-bottom: 1px dashed #efefef;

    .trend-content {
      font-size: 16px;
      color: #333;
      margin-top: 20px;
      cursor: pointer;
    }
  }

  .comment-info {
    .comment-content {
      margin: 0 20px;
      padding-top: 20px;

      .comment-item {
        margin-top: 15px;

        .item-time {
          color: #999999;
          margin-bottom: 10px;
        }

        .item-nick {
          color: #008000;
        }

        .reply-tag {
          color: #999999;
          margin: 0 2px;
        }

        .item-content {
          display: flex;

          .item-content-text {
            flex: 1;
            font-size: 14px;
            color: #333333;
            word-break: break-all;
            line-height: 20px;

            .reply-btn {
              margin-left: 16px;
            }
          }
        }

        &-child {
          margin-left: 40px;
        }
      }
    }
  }
}

.text-cut {
  display: -webkit-box;
  word-break: break-all;
  white-space: normal;
  -webkit-box-orient: vertical;
  overflow: hidden;
  text-overflow: ellipsis;
}

.text-cut1 {
  -webkit-line-clamp: 1;
}
</style>
